<template>
	<view class="container" v-if="loading">
		<view class="wrap">
			<view class="loading">
				<view v-for="(dot, index) in dots" :key="index" class="dot" :class="{ 'jump': dot }"></view>
			</view>
			<!-- 其他内容 -->
			<view class="title">
				{{title}}
			</view>
		</view>

	</view>
</template>

<script>
	/**
	 * 加载中
	 * 三个跳动的绿色小球
	 */
	export default {
		name: "rf-load",
		props: {
			loading: {
				type: Boolean,
				required: true,
				default: false,
			},
			bgColor: {
				type: String,
				required: true
			},
			title: {
				type: String,
				required: true,
				default: "加载中..."
			}
		},
		data() {
			return {

				dots: [true, true, true] // 初始状态下，三个圆点都为true，表示显示
			};
		}
	}
</script>

<style lang="scss">
	.container {
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);

		display: flex;
		justify-content: center;
		align-items: center;
		// flex-direction: column;

		.wrap {

			.title {
				min-height: 30px;
				min-width: 60px;
				font-size: 14px;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.loading {

				display: flex;
				justify-content: center;
				align-items: center;
				// height: 100vh;
				height: 50px;

			}

			.dot {
				width: 10px;
				height: 10px;
				background-color: #58C866;
				border-radius: 50%;
				margin: 0 5px;
			}

			.dot.jump:nth-child(1) {
				animation: jump 1s infinite;
			}

			.dot.jump:nth-child(2) {
				animation: jump 1s infinite 0.2s;
			}

			.dot.jump:nth-child(3) {
				animation: jump 1s infinite 0.4s;
			}

			@keyframes jump {

				0%,
				100% {
					transform: translateY(10px);
				}

				50% {
					transform: translateY(-10px);
				}
			}

		}

		// height: 100vh;

	}
</style>